// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { Page } from "page.slint";
import { GroupBox, Tile, BarTiles, BarTileModel } from "../widgets/widgets.slint";
import { Images } from "../images.slint";

export global WeatherAdapter {
    in property <string> title: "Weather";
    in property <image> current-temperature-icon: Images.cloud;
    in property <string> current-temperature: "22°";
    in property <string> current-day: "May 6th 2023";
    in property <string> current-weather-description: "Very cloudy";
    in property <[BarTileModel]> week-model: [
        {
            title: "Thu",
            icon: Images.cloudy,
            max: 21,
            min: 18,
            absolute-max: 21,
            absolute-min: 15,
            unit: "°"
        },
        {
            title: "Fri",
            icon: Images.cloudy,
            max: 20,
            min: 17,
            absolute-max: 21,
            absolute-min: 15,
            unit: "°"
        },
        {
            title: "Sat",
            icon: Images.cloudy,
            max: 18,
            min: 15,
            absolute-max: 21,
            absolute-min: 15,
            unit: "°"
        }
    ];
}

export component Weather inherits Page {
    in property <string> title <=> WeatherAdapter.title;
    in property <image> current-temperature-icon <=> WeatherAdapter.current-temperature-icon;
    in property <string> current-temperature <=> WeatherAdapter.current-temperature;
    in property <string> current-day <=> WeatherAdapter.current-day;
    in property <string> current-weather-description <=> WeatherAdapter.current-weather-description;
    in property <[BarTileModel]> week-model <=> WeatherAdapter.week-model;

    GroupBox {
        title: root.title;
        spacing: 1px;

        Tile {
            value: current-temperature;
            text: current-day;
            sub-text: current-weather-description;
            icon: current-temperature-icon;
        }

        BarTiles {
            model: week-model;
            active: root.active;
        }

        // stretches the empty element
        if(week-model.length == 0) : Rectangle {}
    }
}